<template>
  <div class="address">
    <van-nav-bar
      title="添加地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <Logo />
    <van-form @submit="onSubmit">
      <van-field
        :value="receiver"
        @input="updateReceiver"
        name="receiver"
        label="收货人"
        placeholder="收货人"
        :rules="[{ required: true, message: '请填写收货人' }]"
      />
      <van-field
        :value="address"
        @input="updateAddress"
        name="address"
        label="详细地址"
        placeholder="详细地址"
        :rules="[{ required: true, message: '请填写详细地址' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Logo from "../components/Logo.vue";
export default {
  components: {
    Logo,
  },
  data() {
    return {
      //   receiver: "",
      //   address: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    updateReceiver(e) {
      // console.log(e);
      this.$store.commit("modifyReceiver", e);
    },
    updateAddress(e) {
      this.$store.commit("modifyAddress", e);
    },
    onSubmit(values) {
      this.$router.push({
        name: "Car",
      });
    },
    ...mapMutations(["modifyReceiver", "modifyAddress"]),
  },
  computed: {
    ...mapState(["receiver", "address"]),
  },
};
</script>

<style>
.address {
  background: #fff;
}
</style>